<template>
  <div
    class="swiper"
    @mouseleave="hover(0)"
    @mouseenter="hover(1)"
  >
    <slot></slot>
    <slot name="bar"></slot>
    <div
      class="banner-bar-cover"
      v-if="!$slots.bar"
    >
      <div
        class="banner-bar"
        v-for="(item, index) in bannerData"
        :key="item.name"
        @click="changeSwiperIndex(index)"
      >
        {{ item.nav }}
        <div class="inner-show">
          <div
            class="banner-bar-inner"
            v-show="index === currentSwiper"
            :style="{width:`${width}%`}"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    autoPlay: {
      type: Boolean,
      default: false
    },
    playTime: {
      type: Number,
      default: 3000
    },
    bannerData: {
      type: Array
    }
  },
  data() {
    return {
      currentSwiper: this.index,
      // 动画是否停止
      stop: false,
      swipers: [],
      width: 0,
      // 动画进行时间
      proceedTime: 0
    }
  },
  methods: {
    autoPlayChange() {
      if (!this.autoPlay) return
      let start = null
      let step = timestamp => {
        if (!start) start = timestamp
        if (this.proceedTime) {
          start = timestamp - this.proceedTime
          this.proceedTime = 0
        }
        let progress = timestamp - start
        this.width = Math.min(progress / (this.playTime / 100), 100)
        if (progress < this.playTime && !this.stop) {
          window.requestAnimationFrame(step)
        }
        if (progress > this.playTime) {
          if (this.currentSwiper < this.swipers.length - 1) {
            this.currentSwiper++
          } else {
            this.currentSwiper = 0
          }
        }
        if (this.stop) {
          this.proceedTime = progress
        }
      }
      window.requestAnimationFrame(step)
    },
    changeSwiperIndex(index) {
      this.currentSwiper = index
    },
    hover(type) {
      if (type) {
        this.stop = true
        return
      }
      this.stop = false
      this.autoPlayChange()
    }
  },
  watch: {
    currentSwiper() {
      this.width = 0
      this.proceedTime = 0
      this.autoPlayChange()
    }
  },
  created() {
    this.autoPlayChange()
  }
}
</script>

<style lang="less" scoped>
.swiper {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.banner-bar-cover {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  bottom: 16px;
  font-size: 0;
  text-align: center;
}
.banner-bar {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  width: 80px;
  height: 36px;
  line-height: 36px;
  padding: 16px 0;
  z-index: 200;
  background-color: transparent;
  overflow: hidden;
  font-size: 0;
  color: #fff;
  cursor: pointer;
  &:hover {
    width: 180px;
    height: 36px;
    padding: 0 13px;
    font-size: 14px;
    background: linear-gradient(90deg, #61ffee, #5490ff);
    transition: all 0.1s ease;
    .inner-show {
      opacity: 0;
    }
  }
}
.inner-show {
  opacity: 1;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 4px;
  background-color: hsla(0, 0%, 60%, 0.4);
}
.banner-bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #61ffee, #5490ff);
}
</style>
